import React from 'react'
import { Box } from '$components';
import CarouselList from './public/carousel-list';
import { Tooltip } from 'antd';
import moment from 'moment';
import NoData from './public/noData';
import { useFsRequest } from '$utils';

function AlarmList(props) {
    const { cardContentHeight } = props;
    const { data: alarms = [] } = useFsRequest({
        url: 'homepage/alarms',
        pollingInterval: 1000 * 60,
        cacheKey: 'alarms',
    });


    const data = alarms.map(s => {
        return [
            s.content,
            s.level == 1 ? '一级' : s.level == 2 ? '二级' : s.level == 3 ? '三级' : '四级',
            moment(s.time).format('YYYY-MM-DD HH:mm:ss')
        ]
    })

    const renderBody = () => {
        return <CarouselList
            header={['预警内容', '预警等级', '预警时间']}
            data={data?.map(s => {
                return [
                    <Tooltip placement="top" title={s[0]}>
                        {s[0].length > 20 ? s[0]?.substring(0, 20) + '...' : s[0]}
                    </Tooltip>,
                    <div style={{ color: s[1] == '一级' ? 'rgba(245, 27, 27, 1)' : s[1] == '二级' ? '#FF7900' : s[1] == '三级' ? '#FFCD00' : '#00DA9F' }}>{s[1]}</div>,
                    s[2]
                ]
            })}
            rowNum={6}
            height={cardContentHeight}
            multiellipsis
            columnWidth={[180, 80, 150]}
        />
    }

    return <Box title={"预警列表"}>
        {alarms?.length > 0 ? renderBody() : <NoData />}
    </Box>
}

export default AlarmList;


